<%@ page import="com.ws.ssmzongjie3.util.Res" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>轮播图列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <style>
        .cus-container {
            width: 100%;
            margin: 0 auto;
        }
        .table {
            font-size: 14px;
        }
        .table th, .table td {
            padding: 8px;
        }
    </style>
</head>
<body>
<div class="container cus-container">
    <div>
        <!-- 搜索框 -->
        <div id="search-carousel" style="float: left; margin: 10px 0px;">
            <form class="form-inline" action="${pageContext.request.contextPath}/lunbotu/list" method="get">
                <div class="form-group">
                    <label for="searchTitle">标题</label>
                    <input type="text" name="carousel_title" class="form-control" id="searchTitle" value="${param.title}">
                </div>
                <button type="submit" class="btn btn-default">查询</button>
                <button type="button" class="btn btn-default" onclick="clearSearch()">清空</button>
            </form>
        </div>

        <!-- 操作按钮 -->
        <div style="float: right; margin: 10px 0px;">
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/lunbotu/add">添加轮播图</a>
            <a class="btn btn-danger" onclick="deleteSelected()">删除选中</a>
        </div>
    </div>

    <!-- 数据表格 -->
    <table class="table table-bordered table-hover clearfix" id="carousel-list">
        <thead>
            <tr class="bg-primary">
                <th><input type="checkbox" id="selectAll"></th>
                <th>ID</th>
                <th>所属线路</th>
                <th>标题</th>
                <th>图片</th>
                <th>排序</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach var="carousel" items="${pageInfo.list}">
                <tr>
                    <td><input type="checkbox" name="carousel_id" value="${carousel.carousel_id}"></td>
                    <td>${carousel.carousel_id}</td>
                    <td>${carousel.route.route_name}</td>
                    <td>${carousel.carousel_title}</td>
                    <td><img src="<%=Res.fileUrl%>${carousel.picture_address}" width="100" alt="轮播图"></td>
                    <td>${carousel.carousel_order}</td>
                    <td>
                        <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/lunbotu/huixian?carousel_id=${carousel.carousel_id}">编辑</a>
                        <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/lunbotu/delete?carousel_id=${carousel.carousel_id}">删除</a>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

    <!-- 分页导航 -->
    <div>
        <nav style="float: left;">
            <ul class="pagination">
                <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                    <a href="${pageContext.request.contextPath}/lunbotu/list?currentPage=1&pageSize=${pageInfo.pageSize}&carousel_title=${param.carousel_title}" aria-label="First">
                        <span aria-hidden="true">首页</span>
                    </a>
                </li>
                <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                    <a href="${pageContext.request.contextPath}/lunbotu/list?currentPage=${pageInfo.pageNum > 1 ? pageInfo.pageNum - 1 : 1}&pageSize=${pageInfo.pageSize}&carousel_title=${param.carousel_title}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <c:set var="startPage" value="${pageInfo.pageNum - 4}" />
                <c:if test="${startPage < 1}">
                    <c:set var="startPage" value="1" />
                </c:if>
                <c:set var="endPage" value="${startPage + 9}" />
                <c:if test="${endPage > pageInfo.pages}">
                    <c:set var="endPage" value="${pageInfo.pages}" />
                    <c:if test="${endPage - startPage + 1 < 10}">
                        <c:set var="startPage" value="${endPage - 9}" />
                        <c:if test="${startPage < 1}">
                            <c:set var="startPage" value="1" />
                        </c:if>
                    </c:if>
                </c:if>
                <c:forEach begin="${startPage}" end="${endPage}" var="i">
                    <li class="${i == pageInfo.pageNum ? 'active' : ''}">
                        <a href="${pageContext.request.contextPath}/lunbotu/list?currentPage=${i}&pageSize=${pageInfo.pageSize}&carousel_title=${param.carousel_title}">${i}</a>
                    </li>
                </c:forEach>
                <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                    <a href="${pageContext.request.contextPath}/lunbotu/list?currentPage=${pageInfo.pageNum < pageInfo.pages ? pageInfo.pageNum + 1 : pageInfo.pages}&pageSize=${pageInfo.pageSize}&carousel_title=${param.carousel_title}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                    <a href="${pageContext.request.contextPath}/lunbotu/list?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&carousel_title=${param.carousel_title}" aria-label="Last">
                        <span aria-hidden="true">尾页</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div style="float: right; margin-top: 25px;">
            <span>当前第${pageInfo.pageNum}页/共${pageInfo.pages}页，共${pageInfo.total}条数据</span>
            每页显示
            <select name="pageSize" onchange="changePageSize(this.value)">
                <option value="5" <c:if test="${pageInfo.pageSize == 5}">selected</c:if>>5</option>
                <option value="10" <c:if test="${pageInfo.pageSize == 10}">selected</c:if>>10</option>
                <option value="15" <c:if test="${pageInfo.pageSize == 15}">selected</c:if>>15</option>
                <option value="20" <c:if test="${pageInfo.pageSize == 20}">selected</c:if>>20</option>
            </select>条数据
        </div>
    </div>
</div>

<script>
// 清空搜索框
function clearSearch() {
    document.getElementById("searchTitle").value = "";
    window.location.href = "${pageContext.request.contextPath}/lunbotu/list";
}

// 改变每页显示条数
function changePageSize(pageSize) {
    var currentPage = ${pageInfo.pageNum};
    var params = {
        currentPage: currentPage,
        pageSize: pageSize,
        carousel_title: "${param.carousel_title}"
    };
    var queryString = Object.keys(params).map(key => key + '=' + encodeURIComponent(params[key])).join('&');
    window.location.href = "${pageContext.request.contextPath}/lunbotu/list?" + queryString;
}

// 全选/取消全选
document.getElementById("selectAll").addEventListener("click", function() {
    var checkboxes = document.querySelectorAll("#carousel-list tbody input[type='checkbox']");
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = document.getElementById("selectAll").checked;
    });
});

// 删除选中
function deleteSelected() {
    if (confirm("确认删除选中项吗？")) {
        var ids = [];
        document.querySelectorAll("#carousel-list tbody input[type='checkbox']:checked").forEach(function(checkbox) {
            ids.push(checkbox.value);
        });
        if (ids.length > 0) {
            window.location.href = "${pageContext.request.contextPath}/lunbotu/deleteBatch?ids=" + ids.join(",");
        } else {
            alert("请先选择要删除的项");
        }
    }
}
</script>
</body>
</html>
